<template>
  <el-dialog title="题目预览" :visible.sync="Showdialog" width="50%">
    <div class="container">
      <el-row style="margin-left: -10px; margin-right: -10px">
        <el-col :span="6" style="padding-left: 10px; padding-right: 10px">
          <span>【题型】：{{ formData.questionType | Types }}</span>
        </el-col>
        <el-col :span="6" style="padding-left: 10px; padding-right: 10px">
          <span>【编号】：{{ formData.id }}</span>
        </el-col>
        <el-col :span="6" style="padding-left: 10px; padding-right: 10px">
          <span>【难度】：{{ formData.difficulty }}</span>
        </el-col>
        <el-col :span="6" style="padding-left: 10px; padding-right: 10px">
          <span>【标签】：{{ formData.tags }}</span>
        </el-col>
      </el-row>
      <el-row style="margin-left: -10px; margin-right: -10px">
        <el-col :span="6" style="padding-left: 10px; padding-right: 10px">
          <span>【学科】：{{ formData.subjectName }}</span>
        </el-col>
        <el-col :span="6" style="padding-left: 10px; padding-right: 10px">
          <span>【目录】：{{ formData.directoryName }}</span>
        </el-col>
        <el-col :span="6" style="padding-left: 10px; padding-right: 10px">
          <span>【方向】：外{{ formData.direction }}</span>
        </el-col>
      </el-row>
      <hr />
      <div>【题干】</div>
      <div style="color: rgb(64, 158, 255)">
        <p v-html="formData.question"></p>
      </div>
      <div style="margin-bottom: 15px">
        {{ formData.questionType | Types }} 选项：（以下选中的选项为正确答案）
      </div>

      <el-checkbox-group
        :value="checkShow"
        v-if="formData.questionType === '2'"
      >
        <el-row v-for="item in type" :key="item.id" style="margin: 10px 0px">
          <el-checkbox :label="item.isRight">{{ item.title }}</el-checkbox>
        </el-row>
      </el-checkbox-group>
      <el-radio-group :value="show" v-if="formData.questionType === '1'">
        <el-row v-for="item in type" :key="item.id" style="margin: 10px 0px">
          <el-radio :label="item.id">{{ item.title }}</el-radio>
        </el-row>
      </el-radio-group>
      <hr />
      <div>
        【参考答案】：
        <el-button type="danger" @click="videoShow = true"
          >视频答案预览</el-button
        >
      </div>
      <div v-if="videoShow">
        <video :src="formData.videoURL" controls></video>
      </div>
      <hr />
      <div>
        【答案解析】：
        <p v-html="formData.answer"></p>
      </div>
      <hr />
      <div>
        【题目备注】：
        <p>{{ formData.remarks }}</p>
      </div>
      <div style="display: flex; justify-content: end">
        <el-button type="primary" @click="Showdialog = false">关闭</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "Problem",
  data() {
    return {
      Showdialog: false,
      videoShow: false,
      type: [],
      formData: {},
      show: "",
      checkShow: [],
    };
  },
  filters: {
    Types(val) {
      if (val === "1") {
        return "单选题";
      }
      if (val === "2") {
        return "多选题";
      }
      if (val === "3") {
        return "简答题";
      }
    },
    Difficulty(val) {
      if (val === "1") {
        return "简单";
      }
      if (val === "2") {
        return "一般";
      }
      if (val === "3") {
        return "困难";
      }
    },
  },
};
</script>

<style>
.container {
  padding: 10px 10px;
}
.el-row {
  margin-bottom: 30px;
}
::v-deep .el-dialog {
  border-radius: 10px;
}
</style>